import React, { useEffect, useState } from "react";
import { Button, Typography } from "antd";
import { ArrowLeftOutlined } from "@ant-design/icons";
import { useNavigate } from "react-router-dom";
import "./404.scss";

const { Title, Text } = Typography;

export default function PageNotFound() {
  const [isLoaded, setIsLoaded] = useState(false);
  const navigate = useNavigate();
  useEffect(() => {
    const timer = setTimeout(() => {
      setIsLoaded(true);
    }, 300);

    return () => clearTimeout(timer);
  }, []);
  const handleGoHome = () => {
    navigate("/");
  };

  return (
    <div className={`error-page ${isLoaded ? "loaded" : ""}`}>
      {/* 背景效果 */}
      <div className="error-bg">
        <div className="stars"></div>
        <div className="gradient-overlay"></div>
      </div>

      <div className="error-container">
        {/* 404 数字动画 */}
        <div className="error-code">
          <div className="digit">4</div>
          <div className="digit zero">0</div>
          <div className="digit">4</div>
        </div>

        <div className="error-message">
          <Text className="error-description">抱歉，您访问的页面可能已被删除或暂时不可用</Text>
        </div>
        <div className="error-actions">
          <Button type="primary" icon={<ArrowLeftOutlined />} onClick={handleGoHome} className="home-button">
            返回首页
          </Button>
        </div>

        {/* 装饰元素 */}
        <div className="error-decorations">
          <div className="decoration decoration-1"></div>
          <div className="decoration decoration-2"></div>
          <div className="decoration decoration-3"></div>
        </div>
      </div>
    </div>
  );
}
